<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		//需求：根据已有的json数据，编写菜单功能，菜单中的菜品和分类都必须是json中的数据，点击不同的菜品分类可以显示与隐藏
			$(function(){
				//创建标签
				$("body").html("<div id='div'></div>");
				$("#div").html("<ul id='ul'>"
				+"<li>"
				+"<a>1</a>"
				+"<ul class='ul1'>"
				+"<li></li>"
				+"<li></li>"
				+"<li></li>"
				+"</ul>"
				+"</li>"
				+"<li>"
				+"<a>2</a>"
				+"<ul class='ul2'>"
				+"<li></li>"
				+"<li></li>"
				+"<li></li>"
				+"</ul>"
				+"</li>"
				+"<li>"
				+"<a>3</a>"
				+"<ul class='ul3'>"
				+"<li></li>"
				+"<li></li>"
				+"<li></li>"
				+"</ul>"
				+"</li>"
				+"</ul>");
				
				//点击事件
				$("a").click(function(){
  					$(this).siblings("ul").toggle(500);
				});
				
				
				//
				$.getJSON("json-3.14.json",function(fn){
					
//					console.log(fn[1][0]);
					
					for (var i = 0; i < 3; i++) {
						$("a").eq(i).html(fn[0][i]);
						$(".ul1 >li").eq(i).html(fn[1][i]);
						$(".ul2 >li").eq(i).html(fn[2][i]);
						$(".ul3 >li").eq(i).html(fn[3][i]);
					}
					
					
					
				})
				
				
			})


			
		</script>
		
	</head>
	<body>
	</body>
</html>
